<!--  -->
<template>
  <div v-show="show">
    <div class="ace-container" v-loading="loading">
      <!-- 官方文档中使用 id，这里禁止使用，在后期打包后容易出现问题，使用 ref 或者 DOM 就行   -->
      <div class="ace-editor" ref="ace"></div>
    </div>
  </div>
</template>

<script>
import ace from 'ace-builds'
import 'ace-builds/webpack-resolver' // 在 webpack 环境中使用必须要导入
import 'ace-builds/src-noconflict/theme-chrome' // 默认设置的主题
import 'ace-builds/src-noconflict/mode-html' // 默认设置的语言模式

import 'ace-builds/src-noconflict/ext-language_tools'

import 'ace-builds/src-noconflict/snippets/javascript'
import 'ace-builds/src-noconflict/snippets/html'
import 'ace-builds/src-noconflict/snippets/css'
import 'ace-builds/src-noconflict/snippets/scss'
import 'ace-builds/src-noconflict/snippets/json'
import 'ace-builds/src-noconflict/snippets/java'
import 'ace-builds/src-noconflict/snippets/text'

export default {
  props: {
    mode: {
      type: String,
      default: 'html'
    },
    maxLines: {
      type: Number,
      default: 36
    },
    minLines: {
      type: Number,
      default: 20
    },
    fontSize: {
      type: Number,
      default: 14
    }
  },
  mounted () {
    this.aceEditor = ace.edit(this.$refs.ace, {
      maxLines: this.maxLines, // 最大行数，超过会自动出现滚动条
      minLines: this.minLines, // 最小行数，还未到最大行数时，编辑器会自动伸缩大小
      fontSize: this.fontSize, // 编辑器内字体大小
      theme: this.themePath, // 默认设置的主题
      mode: this.modePath + this.mode, // 默认设置的语言模式
      tabSize: 4 // 制表符设置为 4 个空格大小
    })
    this.aceEditor.setOptions({
      enableSnippets: true,
      enableLiveAutocompletion: true,
      enableBasicAutocompletion: true
    })
  },
  data () {
    return {
      show: false,
      loading: false,
      aceEditor: null,
      themePath: 'ace/theme/chrome', // 不导入 webpack-resolver，该模块路径会报错
      modePath: 'ace/mode/' // 同上
    }
  },
  methods: {
    created () {
      this.show = true
      this.loadin()
      this.aceEditor.session.setMode(this.modePath + this.mode)
      // 禁用特定的ACE编辑器CSS模式警告规则
      if (this.mode === 'css') {
        this.aceEditor.session.$worker.call('setDisabledRules', ['box-sizing|ids|order-alphabetical|universal-selector|fallback-colors|box-model|adjoining-classes|order-alphabetical|unique-headings|qualified-headings'])
      }
    },
    hide () {
      this.show = false
    },
    loadin () {
      this.loading = true
    },
    loaded () {
      this.loading = false
    },
    getValue () {
      return this.aceEditor.getValue()
    },
    setValue (value) {
      return this.aceEditor.setValue(value)
    },
    editor () {
      return this.aceEditor
    }
  }
}

</script>

<style>
.ace-chrome .ace_print-margin-layer .ace_print-margin{display: none;}
</style>
